<template>
  <div>
    <el-table :data="form.resignations" style="width: 100%">
      <el-table-column type="expand">
        <template #default="props">
          <div m="4">
            <p m="t-0 b-2">员工编号: {{ props.row.id }}</p>
            <p m="t-0 b-2">姓名: {{ props.row.name }}</p>
            <p m="t-0 b-2">离职申请日期: {{ props.row.resign_data }}</p>
            <p m="t-0 b-2">离职部门: {{ props.row.department }}</p>
            <p m="t-0 b-2">离职岗位: {{ props.row.position }}</p>
            <p m="t-0 b-2">离职类型: {{ props.row.kind }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="离职人员编号" prop="id" />
      <el-table-column label="离职人员名称" prop="name" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { getDataset } from "@/api/crud"
import { Resignation } from "@/models/resignation"
import { ref, reactive } from "vue"

UpdateData()

function UpdateData() {
  getDataset<Resignation>("resignations").then((res: any) => {
    form.resignations = res.data
  })
}

const form = reactive({
  resignations: ref<Resignation[]>([])
})
</script>
